<template>
  <!-- 消息列表 -->
  <div class="info">
    <template v-if="infoList.length !== 0">
      <div class="infoList">
        <div v-for="item in infoList" :key="item.id" class="item" @click="toMore(item)">
          <div class="title">{{ item.name }}</div>
          <div class="right">
          <div class="time">{{ item.isRead ? item.updatedAt : item.createdAt }}</div>
          <div v-if="!item.isRead" class="point"></div>
          <i class="el-icon-arrow-right" />
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <pagination v-bind="$attrs" v-on="$listeners" />
    </template>
    <el-empty v-else description="暂无消息" class="empty" />
  </div>
</template>

<script>
import { changeReadMsgAPI } from '@/api/web/hjUser.js'
import { changeMenus } from '@/router/changemenu.js'
import pagination from '../../components/pagination'
export default {
  components: { pagination },
  props: {
    infoList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  created() {},

  methods: {
    async toMore(item) {
      await changeReadMsgAPI(item.id)
      if (item.url === 'receiveAuth') {
        this.$store.commit('hjuser/updatedsearchId', item.mapId)
        this.$store.commit('hjuser/updatedActiveItem', 2)
      } else if (item.url === 'labAuth') {
        this.$store.commit('hjuser/updatedsearchId', item.mapId)
        this.$store.commit('hjuser/updatedActiveItem', 4)
      } else {
        this.$store.commit('hjuser/updatedsystemSearchInfoId', item.mapId||'')
        this.$store.commit('tagsView/visitedViewsDel')
        await changeMenus(item.menuId)
           this.$router.push(item.url)
          // const aa = window.open(item.url + '?id=' + item.mapId + '&sub_id=' + item.menuId, '_blank')
          //  location.reload()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.infoList {
  height: 700px;
}
.item {
  padding-left: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  border-bottom: 2px solid #efefef;
  background-color: #fff;
  .right {
    display: flex;
    align-items: center;
  }
  .title {
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .time {
    margin-right: 10px;
  }
  .el-icon-arrow-right {
    width: 30px;
  }
  .point {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
  }
}

.pagination {
  text-align: right;
  padding-top:40px;
}
.info ::v-deep {
  .el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .el-pager li,
 .el-pagination__total {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
 }
 .el-pagination__total{
  width: unset;
 }
}
</style>
